<template>
  <div class="registbox">
    <div class="inputbox">
      <input type="number" name="mobile" v-model='mobile' placeholder="请输入手机号">
    </div>
    <div class="inputbox" v-show='!check'>
      <input type="number" name="code" v-model='code' placeholder="请输入验证码">
      <mt-button type="primary" size="small" :disabled='disabled' class='code' @click='getcodeM'>{{flag?text:cont+'s后重新获取'}}</mt-button>
    </div>
    <div class="inputbox" v-show='check'>
      <input type="password" name="password" v-model='password' placeholder="请输入密码">
    </div>
    <div class="lang" @click='lang' v-show='!check'>收不到短信，试试语音验证码 </div>
    <mt-button type="primary" class='btn-regist' @click='login'>登录</mt-button>
    <div class="forget_box">
      <div class="goindex" @click='changeTitle'>{{!check?'账号密码登录':'手机短信快捷登录'}}</div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Indicator, Toast, MessageBox, Button } from 'mint-ui'
Vue.component(Button.name, Button)
export default {
  name: 'loginIndex',
  data () {
    return {
      mobile: '',
      code: '',
      password: '',
      disabled: false,
      text: '获取验证码',
      cont: 59,
      flag: true,
      check: false
    }
  },
  created: function () {
    
  },
  methods: {
    getcode: function(t){
      var vthis = this;
      if (!(/^1[34578]\d{9}$/.test(vthis.mobile))) {
        Toast({
          message: '手机号码格式不对',
          position: 'middle',
          duration: 2000
        })
        return false;
      }
      Indicator.open({
        text: '获取验证码',
        spinnerType: 'snake'
      })
      vthis.$http('/user/user/GetMobileVerifyCode2',{messageFrom:"天天拼货团",mobile:vthis.mobile,useFor:"loginOrRegister",smsType:t},function(res){
        Indicator.close()
        if(res.Result){
          Toast({
            message: '验证码发送成功',
            position: 'middle',
            duration: 2000
          })
          vthis.disabled = true
          vthis.flag = false
          const timer = setInterval(function(){
            vthis.cont--;
            if(vthis.cont <= 0){
              clearInterval(timer)
              vthis.disabled = false
              vthis.cont = 59
              vthis.flag = true
            }else{
              vthis.flag = false
            }
          },1000)
        }else{
          MessageBox({
            title: '提示',
            message: res.Message,
            showCancelButton: false,
            closeOnClickModal: false
          });
        }
      },'POST')
    },
    getcodeM: function(){
      this.getcode(1)
    },
    lang: function(){
      this.getcode(2)
    },
    login: function(){
      var vthis = this, dataObj = {};
      if (!(/^1[34578]\d{9}$/.test(vthis.mobile))) {
        Toast({
          message: '手机号码格式不对',
          position: 'middle',
          duration: 2000
        })
        return false;
      }else if(!vthis.check){
        if(vthis.code == ''){
          Toast({
            message: '请输入验证码',
            position: 'middle',
            duration: 2000
          })
          return false
        }else{
          dataObj = {account:vthis.mobile,password:'',mobileCode:vthis.code,typeID: 1,loginFrom:4,key:''}
        }
      }else{
        if(vthis.password == ''){
          Toast({
            message: '请输入密码',
            position: 'middle',
            duration: 2000
          })
          return false
        }else{
          dataObj = {account:vthis.mobile,password:vthis.password,mobileCode:'',typeID: 1,loginFrom:4,key:''}
        }
      }
      // dataObj = {account:'好韵来',password:'123456',mobileCode:'',typeID: 1,loginFrom:4,key:''}
      vthis.$http('/user/user/login',dataObj,function(res){
        if(res.Result){
          localStorage.setItem('token', 'Bearer' + ' ' + res.Data.Token)
          vthis.$router.push({path:'/index/all'})
        }else{
          MessageBox({
              title: '提示',
              message: res.Message,
              showCancelButton: false,
              closeOnClickModal: false
            });
        }
      },'POST')
    },
    changeTitle: function(){
      this.check = !this.check
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .registbox{width: 90%;padding: 10px 5%;}
  .inputbox{width: 90%;border: 1px solid #555;border-radius: 5px;padding: 5px 5%;color: #555;margin: 10px 0;position: relative;}
  .inputbox input{width: 100%;height: 36px;line-height: 36px;border: none;;outline: none;font-size: 14px;}
  .code{position: absolute;top: 6px;right: 5%;}
  .btn-regist{width: 100%;margin-top: 10px;}
  .forget_box{width:100%;height:32px;line-height:32px;margin-top:5px;}
  .goindex{float: left;font-size: 14px;color: #aaa;}
  .lang{font-size:14px;color:#1296db;padding: 5px 0;}
</style>
